<template>
  <z-paging ref="paging" v-model="dataList"
            @query="queryList"
            @onRefresh="onRefresh"
            :auto-hide-loading-after-first-loaded="false">
    <template #top>
      <view class="tabs">
        <up-tabs :list="list1" @click="click" lineWidth="30" line-height="5"
                 lineColor="#f56c6c"
                 @change="tabChange"
                 :scrollable="false"
                 :activeStyle="{color: '#FC7649',transform: 'scale(1.05)',fontSize: '27rpx',fontWeight: 'bold'}"
                 :inactiveStyle="{color: '#3D3D3D',transform: 'scale(1)',fontSize: '28rpx'}"
                 itemStyle="padding-left: 15px; padding-right: 15px; height: 50px;"></up-tabs>
      </view>
    </template>
    <!--订单列表  -->
    <view class="orderTotal">
      <view style="margin-top: 20rpx"></view>
      <view v-for="(item, index) in dataList" :key="index" class="orderList">
        <join_content :isLast="dataList.length-1===index" :is-tas-k-list="true" :item="item"
                      @giveUpTask="giveUpTask(item)" @getGift="getGift(item)" :city="{'reseller_id':parseInt(reseller_id)}"></join_content>
      </view>
    </view>

    <template #refresher>
      <view style="display: flex;justify-content: center;align-items: center;padding-top: 120rpx;">
        <image style="width: 110rpx;height: 110rpx;margin: auto"
               src="https://lsz.lszbg.com/imgs/logo_loading.gif"></image>
      </view>
    </template>
    <template #empty>
      <XtxEmpty/>
    </template>
    <template #loading>
      <view style="display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;"
            v-if="!isRefresh">
        <image style="width: 110rpx;height: 110rpx;" src="https://lsz.lszbg.com/imgs/logo_loading.gif"></image>
        <view
            style="font-size: 38rpx;font-weight: 600;color: #F97632;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
          领食周边购
        </view>
      </view>
    </template>
    <!-- 自定义的没有更多数据view -->
    <template #loadingMoreNoMore>
      <view style="font-size: 26rpx;color: #b4b4b4;text-align: center;box-sizing: border-box;padding: 40rpx 0;">
        没有更多数据
      </view>
    </template>
  </z-paging>
</template>

<script setup>
import {ref} from "vue";
import {onLoad, onPageScroll, onReachBottom} from "@dcloudio/uni-app";
import XtxEmpty from "../components/XtxEmpty.vue";
import useZPaging from "z-paging/components/z-paging/js/hooks/useZPaging";
import Join_content from "./join_content.vue";
import {userJoinChallengeAPI} from "../services/lstz";
import {useUserInfoStore} from "../stores/modules/userInfo";

const userInfoStore = useUserInfoStore()
const paging = ref(null)
let dataList = ref([])
useZPaging(paging)
const reseller_id = ref()

onLoad((options) => {
  reseller_id.value = options.reseller_id
})

const list1 = ref([
  {name: '进行中'},
  {name: '挑战失败'},
  {name: '待领奖'},
  {name: '已领奖'}
]);

function click(item) {
  console.log('item', item);
}

const current = ref(0)
// 当前Tab的Index
const status = ref(1)
const tabChange = (tab) => {
  current.value = tab.index
  status.value = tab.index + 1
  paging?.value?.reload();
}

const giveUpTask = (remItem) => {
  dataList.value = dataList.value.filter(item => item !== remItem);
}
const getGift = (remItem) => {
  dataList.value = dataList.value.filter(item => item !== remItem);
}

function queryList(pageNo, pageSize) {
  userJoinChallengeAPI(status.value, pageNo, pageSize, userInfoStore.userId).then(res => {
    paging.value?.complete(res.result);
  }).catch(() => {
    paging.value?.complete(false);
  });
}

onPageScroll(e => {
})

onReachBottom(() => {
})

</script>
<style>
page {
  background-color: #F6F6F6;
}
</style>

<style scoped lang="scss">
.tabs {
  z-index: 99;
  padding: 0 10rpx;
  background-color: #FFFFFF;
  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.05);
}
</style>
